{% extends "authentication/base.html" %}

{% block title %}注册{% endblock %}

{% block content %}
  <div class="card mt-3 mb-3" style="background-color: {% if low %}{{ low_color }}{% else %}#ffa0b1{% endif %};">
    <h5 class="card-header">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-person-plus" viewBox="0 0 16 16">
        <path d="M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H1s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C9.516 10.68 8.289 10 6 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"></path>
        <path fill-rule="evenodd" d="M13.5 5a.5.5 0 0 1 .5.5V7h1.5a.5.5 0 0 1 0 1H14v1.5a.5.5 0 0 1-1 0V8h-1.5a.5.5 0 0 1 0-1H13V5.5a.5.5 0 0 1 .5-.5z"></path>
      </svg>
      注册
    </h5>
    <div class="card-body">
      <form action="{% url 'authentication:register' %}" method="post">
        {% csrf_token %}
        <div class="form-floating mb-3">
          <input type="text" class="form-control {% if low %}text-bg-secondary{% else %}text-bg-danger{% endif %}" id="username"
                 name="username" placeholder="username" value="{{ username }}"
                 autofocus required>
          <label for="username">用户名</label>
        </div>
        <div class="form-floating mb-3">
          <input type="password" class="form-control {% if low %}text-bg-secondary{% else %}text-bg-danger{% endif %}" id="password"
                 name="password" placeholder="password"  value="{{ password }}"
                 required>
          <label for="password">密码</label>
        </div>
        <div class="form-floating mb-3">
          <input type="password" class="form-control {% if low %}text-bg-secondary{% else %}text-bg-danger{% endif %}" id="password2"
                 name="password2" placeholder="password" value="{{ password2 }}"
                 required>
          <label for="password2">确认密码</label>
        </div>
        {% for error in errors %}
          <div class="alert alert-danger" role="alert">
          {{ error }}
          </div>
        {% endfor %}
        <small><a href="{% url 'authentication:login' %}" class="{% if low %}link-dark{% else %}link-light{% endif %}">已有账号？前往登录-></a></small>
        <div class="d-grid">
          <button type="submit" class="btn {% if low %}btn-secondary{% else %}btn-danger{% endif %}">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-person-plus" viewBox="0 0 16 16">
              <path d="M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H1s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C9.516 10.68 8.289 10 6 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"></path>
              <path fill-rule="evenodd" d="M13.5 5a.5.5 0 0 1 .5.5V7h1.5a.5.5 0 0 1 0 1H14v1.5a.5.5 0 0 1-1 0V8h-1.5a.5.5 0 0 1 0-1H13V5.5a.5.5 0 0 1 .5-.5z"></path>
            </svg>
            注册
          </button>
        </div>
      </form>
    </div>
  </div>
{% endblock %}